<template>
    <div class="ele-body">
        <div class="container-div">
            <!-- 搜索表单 -->
            <!-- <vxe-toolbar>
                <template v-slot:buttons>
                    <vxe-input v-model="value100" placeholder="款号/商品名"></vxe-input>
                    <el-button type="primary" @click="getTable1()" icon="el-icon-search" class="ele-btn-icon"
                        :disabled="disabled" :loading="loadingGetTable">查看</el-button>
                    <el-button type="primary" @click="downloadExcel()" icon="el-icon-download" class="ele-btn-icon"
                        :disabled="disabled" :loading="loadingDownloadExcel">下载</el-button>
                    <el-button @click="createTable()" icon="el-icon-plus" class="ele-btn-icon" :disabled="disabled"
                        :loading="loadingCreateTable">生成报表</el-button>
                    <el-button @click="createExcel()" icon="el-icon-plus" class="ele-btn-icon" :disabled="disabled"
                        :loading="loadingCreateExcel">生成EXCEL</el-button>
                    <el-button type="text" class="ele-btn-icon" size="medium">生成报表时间：{{tableTime}}</el-button>
                </template>
            </vxe-toolbar> -->

            <el-form label-width="60px" class="ele-form-search" @keyup.enter.native="$refs.table.reload()"
                @submit.native.prevent>
                <el-row :gutter="15">
					<el-col :md="2" :sm="12">
					<el-tooltip class="item" effect="dark" content="是否出齐码数据" placement="top-start">
						<vxe-switch v-model="sfqm" open-label="齐码" :open-value="1" close-label="否" :close-value="0" size="mini"></vxe-switch>
					</el-tooltip>
					</el-col>
					<el-col :md="4" :sm="12">
						<el-form-item label="企划年季:" label-width="80px">
							<el-select style="width:100%" placeholder="企划年季" v-model="querys.qhnj0" multiple clearable
								filterable collapse-tags>
								<el-option v-for="item in options_qhnj" :key="item.id" :label="item.name"
									:value="item.id"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :md="3" :sm="12">
						<el-form-item label="年季:">
							<el-select style="width:100%" placeholder="商品年季" v-model="querys.spnj0" multiple clearable
								filterable collapse-tags>
								<el-option v-for="item in options_spnj" :key="item.id" :label="item.name"
									:value="item.id"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
                  
                    <el-col :md="3" :sm="12">
                        <el-form-item label="仓店:">
                            <el-select style="width:100%" placeholder="请输入" v-model="querys.cdid0" multiple clearable
                                filterable collapse-tags>
                                <el-option v-for="item in options_cd" :key="item.id" :label="item.name"
                                    :value="item.name"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :md="3" :sm="12">
                        <el-form-item label="区域:">
                            <el-select style="width:100%" placeholder="请输入" v-model="querys.ppid0" multiple clearable
                                filterable collapse-tags ref="select" >
                                <el-option v-for="item in options_pp" :key="item.id" :label="item.attribname"
                                    :value="item.attribname"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
					<el-col :md="3" :sm="12">
						<el-form-item label="汇总:">
							<el-select style="width:100%" placeholder="请输入" v-model="querys.hz"  clearable
									filterable collapse-tags ref="selecthz" @change="getTable1(1)">
								<el-option v-for="item in options_hz" :key="item.id" :label="item.name"
									:value="item.code"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :md="3" :sm="12" v-if="searchExpand">
						<el-form-item label="性别:">
							<el-select style="width:100%" placeholder="请输入" v-model="querys.xbid" multiple clearable
								filterable collapse-tags>
								<el-option v-for="item in options_xb" :key="item.id" :label="item.attribname"
									:value="item.attribname"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :md="3" :sm="12">
						<el-form-item label="大类:" v-if="searchExpand">
							<el-select style="width:100%" placeholder="请输入" v-model="querys.dlid" multiple clearable
								filterable collapse-tags>
								<el-option v-for="item in options_dl" :key="item.id" :label="item.attribname"
									:value="item.attribname"></el-option>
							</el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :md="3" :sm="12">
                        <el-form-item label="中类:" v-if="searchExpand">
                            <el-select style="width:100%" placeholder="请输入" v-model="querys.zlid" multiple clearable
                                filterable collapse-tags>
                                <el-option v-for="item in options_zl" :key="item.id" :label="item.attribname"
                                    :value="item.attribname"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
					<!-- 时间段查询 -->
					<el-col :md="3" :sm="12" class="oneRowCol selectTime" v-if="searchExpand">
						<el-tooltip content=" 时间段" placement="top-start">
							<el-date-picker
							v-model="selectTime"
							type="daterange"
							value-format="yyyyMMdd"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
							>
							</el-date-picker>
						</el-tooltip>
					</el-col>
					<el-col :md="3" :sm="12" style="margin-left: 30px;">
						<el-form-item label="小类:" v-if="searchExpand">
							<el-select style="width:100%" placeholder="请输入" v-model="querys.xlid" multiple clearable
								filterable collapse-tags>
								<el-option v-for="item in options_xl" :key="item.id" :label="item.attribname"
									:value="item.attribname"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :md="3" :sm="12" style="margin-left: 30px;">
						<el-form-item label="正特价:" v-if="searchExpand">
							<el-select style="width:100%" placeholder="请输入" v-model="querys.tjid0" multiple clearable
								filterable collapse-tags>
								<el-option v-for="item in options_tj" :key="item.id" :label="item.attribname"
									:value="item.attribname"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :md="3" :sm="12">
						<el-form-item label="款号:"><el-input placeholder="款号或商品名" v-model="querys.cxspbh"
								clearable></el-input></el-form-item>
					</el-col>
					<el-col :md="3" :sm="12">
						<el-form-item label="供应商:" v-if="searchExpand">
							<el-select style="width:100%" placeholder="请输入" v-model="querys.gysid" multiple clearable
								filterable collapse-tags>
								<el-option v-for="item in options_gys" :key="item.id" :label="item.name"
									:value="item.name"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :md="3" :sm="12">
						<el-form-item label="年份:" v-if="searchExpand">
							<el-select style="width:100%" placeholder="请输入" v-model="querys.nfid" multiple clearable
								filterable collapse-tags>
								<el-option v-for="item in options_nf" :key="item.id" :label="item.attribname"
									:value="item.attribname"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :md="3" :sm="12">
						<el-form-item label="季节:" v-if="searchExpand">
							<el-select style="width:100%" placeholder="请输入" v-model="querys.jjid" multiple clearable
								filterable collapse-tags>
								<el-option v-for="item in options_jj" :key="item.id" :label="item.attribname"
									:value="item.attribname"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :md="3" :sm="12" v-if="searchExpand">
						<el-form-item label="波段:">
							<el-select style="width:100%" placeholder="请输入" v-model="querys.bdid" multiple clearable
								filterable collapse-tags>
								<el-option v-for="item in options_bd" :key="item.id" :label="item.attribname"
									:value="item.attribname"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :md="3" :sm="12" v-if="searchExpand">
						<el-form-item label="价格带:">
							<el-select style="width:100%" placeholder="请输入" v-model="querys.jgdid" multiple clearable
								filterable collapse-tags>
								<el-option v-for="item in options_jgd" :key="item.id" :label="item.name"
									:value="item.name"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					
					<el-col :md="2" :sm="12">
						<div class="ele-form-actions">
							<!-- <el-button type="primary" @click="$refs.table.reload()" icon="el-icon-search" class="ele-btn-icon">查询</el-button> -->
							<!-- <el-button @click="(table.where = {}) && $refs.table.reload()">重置</el-button> -->
							<el-link v-if="searchExpand" @click="searchExpand = false" type="primary" :underline="false">
								收起
								<i class="el-icon-arrow-up"></i>
							</el-link>
							<el-link v-else @click="searchExpand = true" type="primary" :underline="false">
								更多
								<i class="el-icon-arrow-down"></i>
							</el-link>
						</div>
					</el-col>
                </el-row>
				
                <el-row :gutter="15">
                    <el-col :md="24" :sm="24">
                        <div class="ele-form-actions">
                            <el-button type="primary" @click="getTable1(1)" icon="el-icon-search" class="ele-btn-icon"
                                :disabled="disabled" :loading="loadingGetTable">查询</el-button>
                            <el-tooltip class="item" effect="dark" content="下载查询的数据到EXCEL" placement="top-start">
                                <el-button type="warning" @click="getExcel()" icon="el-icon-download" class="ele-btn-icon"
                                    :disabled="disabled" :loading="loadingGetExcel">下载</el-button>
                            </el-tooltip>
                            <el-button type="info" @click="selectReset()" icon="el-icon-delete" class="ele-btn-icon"
                                :disabled="disabled" >重置</el-button>
							<el-button type="info" @click="Back()" icon="el-icon-back" class="ele-btn-icon"
								:disabled="disabled" >返回</el-button>	
							<el-tooltip class="item" effect="dark" content="更多" placement="top-start">
								<el-button type="primary" @click="sxButton()" icon="el-icon-menu" class="ele-btn-icon"
									:disabled="disabled" :loading="loadingGetExcel"></el-button>
							</el-tooltip>	
                            <el-button @click="createTable()" class="ele-btn-icon" :disabled="disabled"
                                v-permission="'qx_bbglqx'" :loading="loadingCreateTable">1生成报表</el-button>
                            <el-button @click="createExcel()" class="ele-btn-icon" :disabled="disabled"
                                v-permission="'qx_bbglqx'" :loading="loadingCreateExcel">2生成EXCEL</el-button>
                            <el-button @click="downloadExcel()" class="ele-btn-icon" :disabled="disabled"
                                v-permission="'qx_bbglqx'" :loading="loadingDownloadExcel">3下载所有</el-button>
                            <!-- <el-link v-if="searchExpand" @click="searchExpand = false" type="primary" :underline="false">
								收起
								<i class="el-icon-arrow-up"></i>
							</el-link>
							<el-link v-else @click="searchExpand = true" type="primary" :underline="false">
								更多
								<i class="el-icon-arrow-down"></i>
							</el-link> -->
                            <!-- <el-button type="text" class="ele-btn-icon" size="medium">报表时间:{{tableTime}}</el-button> -->
                            <el-link type="danger" :underline="false">报表时间：{{tableTime}}</el-link>
							<el-link :underline="false">报表时间段：{{this.data1}}-{{this.data2}}</el-link>
                        </div>
                    </el-col>
                </el-row>
				<!--======筛选面板====== -->
				<div class="CTon_cs" v-show="showMore">
					<el-col class="more-input">
						<vxe-button style="width:110px" type="text" content="售罄率>=："></vxe-button>
						<el-input style="width:50px" v-model="querys.sql" type="number"></el-input>
					</el-col>
					<el-col class="more-input">
						<vxe-button style="width:110px" type="text" content="采购次数>=："></vxe-button>
						<el-input style="width:50px" v-model="querys.cgcs" type="number"></el-input>
					</el-col>
					<el-col class="more-input">
						<vxe-button style="width:110px" type="text" content="到货天数>=："></vxe-button>
						<el-input style="width:50px" v-model="querys.dhts" type="number"></el-input>
					</el-col>
				</div>
            
			</el-form>
			
			
            <!-- 数据表格1 -->
			<vxe-toolbar  custom></vxe-toolbar>
			<vxe-table auto-resize  ref="tabledyn" border stripe :highlight-current-row="true" size="mini" height="77%" resizable
				highlight-hover-row highlight-hover-column show-header-overflow show-overflow row-id="id"
				class="mytable-scrollbar"
				show-footer
				@cell-mouseenter="table1Mouseenter"
				@cell-click="table1dbClick"
				:footer-method="table1Footer"
                :loading="loading1" :data="tableData1">
                <template v-for="(item, index) in tableColumn1">
						<vxe-table-column 
						sortable
						:field="item.fieldcode" 
						:title="item.fieldname" 
						:min-width="item.showwidth"
                        :key="index" 
						:visible="item.visible == 0 "
						:formatter="getImageFormatter(item)"
						:type="getColumnType(item)">
						</vxe-table-column>
                </template>
            </vxe-table>
			
            <!-- 表格分页 -->
            <vxe-pager :loading="loading1" :current-page="tablePage1.currentPage" :page-size="tablePage1.pageSize"
                :total="tablePage1.totalResult"
                :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
                @page-change="handlePageChange1">
            </vxe-pager>
			
			
        </div>
			<!-- 商品图片弹窗 -->
			<vxe-modal v-model="showSpxx" :title="'款号:'+this.spxxData.spbh" width="360" :zIndex="1200"  :position="{top:200, left:300}" :mask="false" :lock-view="false" >
				<img style="width: 330px;height: 440px;object-fit:contain" v-bind:src="this.spxxData.sptp" />
			</vxe-modal>
    </div>
</template>

<script>
	import XEUtils from'xe-utils'

    export default {
        name: 'BiJxcbb', //进销存报表
        data() {
            return {
                loading1: false,
                tableData1: [],
				tableData2: [], //所有数据
                tablePage1: {
                    currentPage: 1,
                    pageSize: 20,
                    totalResult: 0
                },
                tableColumn1: [],
                tableTime: '--',
                loadingCreateTable: false,
                loadingGetTable: false,
                loadingCreateExcel: false,
                loadingDownloadExcel: false,
                loadingGetExcel: false,
                disabled: false,
				showSpxx:false,
				spxxData:{},
				showMore:false,

                searchExpand: false, // 搜索表单是否展开

                //基础查询条件（品牌pp、年份nf、季节jj、小类xl、性别xb）
                options_pp: [],
                options_nf: [],
                options_jj: [],
                options_xb: [],
                options_dl: [],
                options_zl: [],
                options_xl: [],
				options_bd: [],
                options_gys: [], //供应商
				options_jgd: [], //价格带
                options_cd: [], //仓店
				options_qhnj: [], //企划年季
				options_spnj: [], //商品年季
				options_hz: [], //汇总
				sfqm:0,//是否齐码
                //查询条件
                querys: {
					ppid0: [],
                    ppid: [],
					ppid1: [],
                    nfid: [],
                    jjid: [],
					xbid0: [],
                    xbid: [],
					xbid1: [],
                    dlid: [],
					dlid1: [],
                    zlid: [],
                    xlid: [],
					tjid0: [],
					tjid: [],
					tjid1: [],
                    gysid: [],
					cdid0: [],
                    cdid: [],
					cdid1: [],
					bdid: [],
					qhnj0:[],
					qhnj:[],
					qhnj1:[],
					spnj0:[],
					spnj:[],
					spnj1:[],
					jgdid:[],//价格带
					hz:[],//汇总
                    cxspbh: null, //手动输入的款号
					sql: null, //售罄率
					cgcs: null,//采购次数
					dhts: null //到货天数
                },
				selectTime:[],
				data1 : null,
				data2 : null,
				pdSfZj : true
            }
        },
        created() {
         
			// 动态属性
			this.selectAttribList();
            //供应商
            this.$http.post('/scm/base/supplier').then(res => {
                this.options_gys = res.data.data;
            });
            //仓店
            this.$http.post('/scm/base/store').then(res => {
                this.options_cd = res.data.data;
            });
			
			//价格带
			this.$http.post('/scm/base/jgd').then(res => {
				this.options_jgd = res.data.data;
			});
			
			//企划年季和商品年季
			this.$http.post('/scm/base/nj').then(res => {
				this.options_qhnj = res.data.data;
				this.options_spnj = res.data.data;
			});
			
			//汇总
			this.$http.post('/scm/base/hz').then(res => {
				this.options_hz = res.data.data;
			});

            // this.findList1();
            this.getTableTime();
            this.getTable1();
			this.Deletetj();//删除条件
			


        },
        methods: {
			//下拉筛选条件
			selectAttribList() {
				this.$http.post('/scm/base/selectAllAttrib').then(res => {
					this.attribList = res.data
						this.attribList.forEach(res => {
						if (res.dtzd == 'dtzd_pp') {
							this.$http.post('/scm/base/selctAttribById', {
								attr: res.id
							}).then(n => {
								this.options_pp = n.data  //品牌
							})
							}
						if (res.dtzd == 'dtzd_nf') {
							this.$http.post('/scm/base/selctAttribById', {
								attr: res.id
							}).then(n => {
								this.options_nf = n.data  //年份
							})
						}	
						if (res.dtzd == 'dtzd_jj') {
							this.$http.post('/scm/base/selctAttribById', {
								attr: res.id
							}).then(n => {
								this.options_jj = n.data  //季节
							})
						}
						if (res.dtzd == 'dtzd_xb') {
							this.$http.post('/scm/base/selctAttribById', {
								attr: res.id
							}).then(n => {
								this.options_xb = n.data   //性别
							})
						}
						if (res.dtzd == 'dtzd_dl') {
							this.$http.post('/scm/base/selctAttribById', {
								attr: res.id
							}).then(n => {
								this.options_dl = n.data   //大类
							})
						}
						if (res.dtzd == 'dtzd_zl') {
							this.$http.post('/scm/base/selctAttribById', {
								attr: res.id
							}).then(n => {
								this.options_zl = n.data     //中类
							})
						}
						if (res.dtzd == 'dtzd_xl') {
							this.$http.post('/scm/base/selctAttribById', {
								attr: res.id
							}).then(n => {
								this.options_xl = n.data       //小类
							})
						}
						if (res.dtzd == 'dtzd_tj') {
							this.$http.post('/scm/base/selctAttribById', {
								attr: res.id
							}).then(n => {
								this.options_tj = n.data       //正特价
							})
						}
						if (res.dtzd == 'dtzd_bd') {
							this.$http.post('/scm/base/selctAttribById', {
								attr: res.id
							}).then(n => {
								this.options_bd = n.data       //波段
							})
						}
					})
				})
			},
            //获取生成报表数据的时间
			getTableTime() {
				this.$http.post('/scm/bi/getTableTime/jxcbb1', {})
					.then(res => {
						this.tableTime = res.data.tableTime || '';
						if (res.data.code == 0) {
							this.tableTime = res.data.tableTime || '';
						} else {
							this.$message.error(res.data.msg);
						}
					})
					.catch(e => {
						this.$message.error(e.message);
					});
			},
			//表1 表尾合计行
			table1Footer({ columns }) {
				//console.log(columns,'columns');
				return [
					columns.map((column ) => { //, columnIndex
						if(column.property == 'spmc') { //if(columnIndex === 3) {
							return '合计:'
						}else if(column.property == '零售数量_520') { //数量的合计
							return XEUtils.sum(this.tableData2,'零售数量_520');
						}else if(column.property == '零售金额_530') { //金额的合计
							return XEUtils.sum(this.tableData2,'零售金额_530');
						}else if(column.property == '标准零售额_540') { //零售吊牌额的合计
							return XEUtils.sum(this.tableData2,'标准零售额_540');
						}else if(column.property == '零售成本额_550') { //零售成本额的合计
							return XEUtils.sum(this.tableData2,'零售成本额_550');
						}else if(column.property == '历史库存成本_576') { //零售成本额的合计
							return XEUtils.sum(this.tableData2,'历史库存成本_576');
						}else if(column.property == '历史库存_575') { //零售成本额的合计
							return XEUtils.sum(this.tableData2,'历史库存_575');
						}else if(column.property == '毛利率_560') { //零售毛利额的合计
							return XEUtils.sum(this.tableData2, '零售金额_530') == 0
								? 0
								: parseFloat(
								Number(
									((XEUtils.sum(this.tableData2, '零售金额_530') - XEUtils.sum(this.tableData2, '零售成本额_550_1')) /
									XEUtils.sum(this.tableData2, '零售金额_530')) *100
									).toFixed(1)
								);
						}else if(column.property == '零售折扣_570') { //零售折扣的合计
							return XEUtils.sum(this.tableData2, '零售金额_530') == 0
								? 0
								: parseFloat(
								Number(
									(XEUtils.sum(this.tableData2, '零售金额_530')/XEUtils.sum(this.tableData2, '标准零售额_540_1'))  *100
									).toFixed(1)
								);
						}else if(column.property == '售罄率_571') { //售罄率的合计
							return XEUtils.sum(this.tableData2, '零售成本额_550_1') == 0
								? 0
								: parseFloat(
								Number(
									(XEUtils.sum(this.tableData2, '零售成本额_550_1')/(XEUtils.sum(this.tableData2, '零售成本额_550_1')+
									XEUtils.sum(this.tableData2, '历史库存成本_576_1')))  *100
									).toFixed(1)
								);
						}else if(column.property == '回报率_572') { //回报率的合计
							return XEUtils.sum(this.tableData2, '零售成本额_550_1') == 0
								? 0
								: parseFloat(
								Number(
									(XEUtils.sum(this.tableData2, '零售成本额_550_1')/(XEUtils.sum(this.tableData2, '零售成本额_550_1')+
									XEUtils.sum(this.tableData2, '历史库存成本_576_1')))/(1-((XEUtils.sum(this.tableData2, '零售金额_530') - XEUtils.sum(this.tableData2, '零售成本额_550_1')) /
									XEUtils.sum(this.tableData2, '零售金额_530')))* 100 
									).toFixed(1)
								);
						}
						return ''
					})
				]
			},
			// 根据 column 判断是否为图片列
			getColumnType(item) {
			//	console.log(item,'item');
			// 如果字段名或者字段代码符合某些规则，判断为图片列
				if (item.fieldcode == '商品图片_10_0_70') {  // 根据你的字段名判断是否是图片列
					return 'html';  // 图片列设置为 html 类型
				}
					return 'default';  // 其他列保持默认类型
				},
			//图片格式化
			// getImageFormatter2(item) {
			// 	console.log(item,'cellValue');
			// 	if (item.fieldcode == '商品图片_10') {
			// 		return ({ row }) => {
			// 			const imageUrl = row[item.fieldcode];
			// 			var onerror = "this.style.display='none'"; //错误图片隐藏图片元素
			// 			return '<img src="' + imageUrl + '" style="height:30px;width:28px" onerror="'+onerror+'">';
			// 		}
			// 	}
			// },
			// 根据列动态设置 formatter
			getImageFormatter(item) {
			// 如果是图片列，返回 formatter 进行图片渲染
			if (item.fieldcode == '商品图片_10_0_70') {
				return ({ row }) => {
				const imageUrl = row[item.fieldcode];
					return `<img src="${imageUrl}"  style="width: 28px; height: 30px;"/>`;
				};
			}
			// 对于非图片列返回默认的格式化函数
			return null;
			},
			//表1 鼠标移入事件
			table1Mouseenter(row) {
				//console.log(row,'row');
				this.showSpxx = false;
				if (row.column.property =='商品图片_10_0_70' && row.row.spid!=null) { //打开商品图片弹窗  row.column.property == 'sptp' row.columnIndex == 2
					this.$http.post('/scm/base/getProduct', { spid: row.row.spid }).then(res => {
						//console.log('res',res);
						this.spxxData = res.data.data;
					});
					this.showSpxx = true;
					return;
				}
			},
			//双击单行
			table1dbClick(row){
			//	this.querys.ppid0=['4458_女装区'];
			//	this.querys.ppid0=row.column.property;
			if(row.column.property=='区域_120_1'){
				this.querys.ppid0=[row.row.[row.column.property]];
				//console.log('row',this.querys.ppid0);
			}else if(row.column.property=='门店名称_110_1'){
				this.querys.cdid0=[row.row.[row.column.property]];
			}else if(row.column.property=='供应商_230_1'){
				this.querys.gysid=[row.row.[row.column.property]];
			}else if(row.column.property=='标准售价_290_1'){
				this.querys.jgdid=[row.row.[row.column.property]];
			}else if(row.column.property=='大类_140_1'){
				this.querys.dlid=[row.row.[row.column.property]];
			}else if(row.column.property=='中类_150_1'){
				this.querys.zlid=[row.row.[row.column.property]];
			}else if(row.column.property=='小类_160_1'){
				this.querys.xlid=[row.row.[row.column.property]];
			}else if(row.column.property=='年份_170_1'){
				this.querys.nfid=[row.row.[row.column.property]];
			}else if(row.column.property=='供应商_230_1'){
				this.querys.gysid=[row.row.[row.column.property]];
			}else if(row.column.property=='季节_180_1'){
				this.querys.jjid=[row.row.[row.column.property]];
			}else if(row.column.property=='正特价_220_1'){
				this.querys.tjid0=[row.row.[row.column.property]];
			}
			
				this.handleFocus();
			//	console.log('row',this.querys.ppid0);
			//	console.log('row',row);
			},
			//存条件
			Bctj() {
				
				this.$http.post('/scm/base/bctj',{...this.querys}).then(res => {
					
					if(res.data.code == 0){
						this.$message.success(res.data.msg)
					}else{
						this.$message.info(res.data.msg)
					}
					
				});
				
			},
			//存条件
			Deletetj() {
				
				this.$http.post('/scm/base/deleteAll').then(res => {
					
					if(res.data.code == 0){
						this.$message.success(res.data.msg)
					}else{
						this.$message.info(res.data.msg)
					}
					
				});
				
			},
			//返回上一次筛选条件
			Back() {
				
				this.$http.post('/scm/base/tj' ).then(res => {
					//console.log('res',res);
					this.querys.ppid0 = res.data.data.ppid;
					this.querys.hz = res.data.data.hz;
					this.querys.cdid0 =res.data.data.cdid;
					this.querys.nfid =res.data.data.nfid;
					this.querys.jjid =res.data.data.jjid;
					this.querys.dlid =res.data.data.dlid;
					this.querys.zlid =res.data.data.zlid;
					this.querys.zlid =res.data.data.xlid;
					this.querys.tjid0 =res.data.data.tjid;
					this.querys.gysid =res.data.data.gysid;
					this.querys.jgdid =res.data.data.jgdid;
					//this.querys.ppid0 = res.data.data;
					//console.log('ppid0',this.querys.cdid0);
					this.getTable1(2);
				});
				//this.querys.ppid0=['4458_女装区']; 
				//console.log('ppid0',this.querys.ppid0);
				//console.log('hz',this.querys.hz);
				//this.getTable1(1);
			},
			//返回上一页
			goBack() {
				this.$router.go(-1);  // 返回上一页
			},
			//聚焦
			handleFocus() {
				//console.log('进入');
				this.$nextTick(() => {
				// 获取 el-select 实例
					const select = this.$refs.selecthz;
				// 手动触发 focus 事件
					select.focus();
				});
			
			},
            //清空筛选
            selectReset() {	
                this.querys.cdid0 = []; //仓店ID
                this.querys.gysid = []; //供应商ID
                this.querys.cxspbh = null; //手输商品款号
                this.querys.ppid0 = []; //品牌
                this.querys.nfid = []; //年份
                this.querys.jjid = []; //季节
                this.querys.dlid = []; //大类
                this.querys.zlid = []; //中类
                this.querys.xlid = []; //小类
                this.querys.xbid = []; //性别
                this.$message('已重置所有筛选条件了')
            },
            //表1 获取表1数据
            getTable1(pdValue) {
				// 如果选择了时间段则走新增
				if(this.selectTime && this.selectTime.length>0 && pdValue == 1) {

					// 开始时间
					this.data1 = this.selectTime[0]
					// 结束时间
					this.data2 = this.selectTime[1]
					this.pdSfZj = false;
					this.createTable()
					return;
				}
				
				if(pdValue == 1){
					this.Bctj();//保存条件
				}
				// 如果不存在则走查询
				this.querys.ppid = this.querys.ppid0.map(item => item.substring(item.indexOf('_') + 1));
				this.querys.ppid1 = this.querys.ppid0.map(item => item.substring(0,item.indexOf('_')));
				this.querys.nfid = this.querys.nfid = this.querys.nfid.map(item => item.substring(item.indexOf('_') + 1));
				this.querys.jjid = this.querys.jjid = this.querys.jjid.map(item => item.substring(item.indexOf('_') + 1));
				this.querys.dlid = this.querys.dlid = this.querys.dlid.map(item => item.substring(item.indexOf('_') + 1));
				this.querys.zlid = this.querys.zlid = this.querys.zlid.map(item => item.substring(item.indexOf('_') + 1));
				this.querys.xlid = this.querys.xlid = this.querys.xlid.map(item => item.substring(item.indexOf('_') + 1));
				this.querys.xbid = this.querys.xbid = this.querys.xbid.map(item => item.substring(item.indexOf('_') + 1));
				this.querys.bdid = this.querys.bdid = this.querys.bdid.map(item => item.substring(item.indexOf('_') + 1));
				this.querys.tjid  = this.querys.tjid0.map(item => item.substring(item.indexOf('_') + 1));
				this.querys.tjid1  = this.querys.tjid0.map(item => item.substring(0,item.indexOf('_')));
				this.querys.qhnj  = this.querys.qhnj0.map(item => item.substring(item.indexOf('_') + 1));
				this.querys.qhnj1  = this.querys.qhnj0.map(item => item.substring(0,item.indexOf('_')));
				this.querys.spnj  = this.querys.spnj0.map(item => item.substring(item.indexOf('_') + 1));
				this.querys.spnj1  = this.querys.spnj0.map(item => item.substring(0,item.indexOf('_')));
				this.querys.cdid  = this.querys.cdid0.map(item => item.substring(item.indexOf('_') + 1));
				this.querys.cdid1  = this.querys.cdid0.map(item => item.substring(0,item.indexOf('_')));
                this.loading1 = true
                this.loadingGetTable = true;
				
				this.qSj();
				
                this.$http.post('/scm/bi/getPages/jxcbb1', {
                        page: this.tablePage1.currentPage,
                        limit: this.tablePage1.pageSize,
						sfqm:this.sfqm,
                        ...this.querys
                    })
                    .then(res => {
                        this.loading1 = false;
                        this.loadingGetTable = false;
                        this.tableColumn1 = []; //初始化
						//console.log(res,'res');
                        if (res.data.code == 0) {
                            this.tableData1 = res.data.data;
                            this.tablePage1.totalResult = res.data.count;
                            if (res.data.count <= 0) {
                                this.$message('没有查询到数据');
                                return;
                            }

                            //
                            let obj = res.data.data[0]; //{name:“小白”,age:18,sex:“男”}
                            let newobj = Object.keys(obj)
                            // console.log(newobj,'newobj');

                            var itemArr = [];
                            var itemObj = {};
                            var len = newobj.length;
                            for (let i = 0; i < len; i++) {
                                itemArr = [];
                                itemObj = {};
                                if (newobj[i] == 'rownum_' || newobj[i] == 'creatat' || newobj[i] == 'ppid' ||
                                    newobj[i] == 'cdid' || newobj[i] == 'spid') {
                                    continue;
                                }
                                itemArr = newobj[i].split('_');
                                itemObj = {
                                    fieldcode: newobj[i],
                                    fieldname: itemArr[0],
                                    fieldseq: itemArr[1] || 1,
                                    showwidth: itemArr[3] || 100,
									visible: itemArr[2] || 0
                                };
                                this.tableColumn1.push(itemObj);
                            }
                            this.tableColumn1.sort(this.sortBy('fieldseq'));
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    })
                    .catch(e => {
                        this.loading1 = false;
                        this.loadingGetTable = false;
                        this.$message.error(e.message);
                    });
            },
			//打开筛选面板
			sxButton(){
				//console.log('进入');
				this.showMore = this.showMore ? false : true;
			},
			//全数据
			qSj(){
				//console.log('进入');
				this.$http.post('/scm/bi/getPages/jxcbb1', {
						...this.querys
					})
					.then(res => {
						if (res.data.code == 0) {
							//console.log(res,'res');
							//console.log(this.tableData1,'res1');
							this.tableData2 = res.data.data;
							if (res.data.count <= 0) {
								this.$message('没有查询到数据');
								return;
							}
						}
					})
				},
            //根据传过来的字段进行排序
            sortBy(field) {
                return (x, y) => {
                    return x[field] - y[field]
                }
            },
			//	表格分页组件
				handlePageChange1({
					currentPage,
					pageSize
				}) {
					this.tablePage1.currentPage = currentPage
					this.tablePage1.pageSize = pageSize
					this.getTable1();
				},
            //生成报表数据
            createTable() {
				//console.log('进入');
				if(this.pdSfZj){
					this.data1 = 'zhijie'
					this.data2 = 'zhijie'
				}
                this.$confirm('重新生成报表将会覆盖当前的查询结果.', '提示', {
                        type: 'warning'
                    })
                    .then(() => {
                        this.loading1 = true
                        this.loadingCreateTable = true
                        this.disabled = true;
                        this.$http.post('/scm/bi/createTable/jxcbb1', {
							data1 : this.data1,
							data2 : this.data2
						})
                            .then(res => {
                                this.loading1 = false;
                                this.loadingCreateTable = false;
                                this.disabled = false;
                                if (res.data.code == 0) {
                                    this.$message.success(res.data.msg);
                                    this.getTable1(2);
                                    this.getTableTime();
                                } else {
                                    this.$message.error(res.data.msg);
                                }
                            })
                            .catch(e => {
                                this.loading1 = false;
                                this.loadingCreateTable = false;
                                this.disabled = false;
                                this.$message.error(e.message);
                            });
                    })
                    .catch(() => 0);
            },
            //生成EXCEL
            createExcel() {
                this.$confirm('重新生成EXCEL可能需要较长时间.', '提示', {
                        type: 'warning'
                    })
                    .then(() => {
                        this.loadingCreateExcel = true
                        this.disabled = true;

                        this.$http.post('/scm/bi/createExcel/jxcbb', {})
                            .then(res => {
                                this.loadingCreateExcel = false;
                                this.disabled = false;
                                this.getTableTime();
                                if (res.data.code == 0) {
                                    this.$message.success(res.data.msg);
                                } else {
                                    this.$message.error(res.data.msg);
                                }
                            })
                            .catch(e => {
                                this.loadingCreateExcel = false;
                                this.disabled = false;
                                this.$message.error(e.message);
                            });
                    })
                    .catch(() => 0);
            },
            //下载Excel
            async getExcel() {
                this.loadingGetExcel = true;
                this.disabled = true;
                await this.downloadFile('/scm/bi/getExcel/jxcbb1', '进销存报表.xlsx', this.querys);
                this.loadingGetExcel = false;
                this.disabled = false;

                // 这种方式loading按钮不会生效 ！！！
                // await this.$confirm('确定下载查询的数据到EXCEL吗？数据量较多则可能需要较长时间.', '提示', {
                //         type: 'warning'
                //     })
                //     .then(() => {
                //         this.loadingGetExcel = true;
                //         this.disabled = true;
                //         this.downloadFile('/scm/bi/getExcel/jxcbb', '进销存报表.xlsx', this.querys);
                //         this.loadingGetExcel = false;
                //         this.disabled = false;
                //     })
                //     .catch(() => 0);

            },
            //下载所有Excel
            async downloadExcel() {
                this.loadingDownloadExcel = true;
                this.disabled = true;
                await this.downloadFile('/scm/bi/downloadExcel/jxcbb1', '进销存报表.xlsx');
                this.loadingDownloadExcel = false;
                this.disabled = false;
            },
            //Vue通用下载方法 （async await设置为同步方法）
            async downloadFile(url, filename, params) {
                await this.axios
                    .request({
                        url: url,
                        method: 'post',
                        data: {
                            ...params
                        },
                        responseType: 'blob',
                        timeout: 3600000
                        //type: 'application/x-www-form-urlencoded'
                    })
                    .then(res => {
                        var blob = new Blob([res.data], {
                            type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
                        });
                        var downloadElement = document.createElement('a');
                        var href = window.URL.createObjectURL(blob); // 创建下载的链接
                        var contentFilename = (decodeURI(res.headers['content-disposition'])).split(
                            'filename=')[1]; //获取服务器传过来的文件名
                        downloadElement.href = href;
                        // downloadElement.download = decodeURI(res.headers['Content-Disposition'].split('filename=')[1]); // 下载后文件名
                        downloadElement.download = contentFilename || (filename || '下载的文件');
                        document.body.appendChild(downloadElement);
                        downloadElement.click(); // 点击下载
                        document.body.removeChild(downloadElement); // 下载完成移除元素
                        window.URL.revokeObjectURL(href); // 释放掉blob对象
                    });
            },

        }
    }
</script>

<style lang="scss" scoped >
    .container-div {
        height: calc(100vh - 110px);
        background-color: #ffffff;
        padding: 5px;
    }

    /* 屏幕尺寸大于767px则使用此样式  @media screen and (max-width: 768px) */
    @media screen and (min-width: 767px) {
        .container-div {
            height: calc(100vh - 110px);
        }
    }
	.CTon_cs {
		width: 190px;
		height: 200px; //每行30px
		position: absolute;
		left: 210px;
		z-index: 999;
		background: #ffffff;
		border-radius: 6px;
		border: 1px solid #f0f0f0;
		//top: 166px;
		box-shadow: 0px 0px 10px 5px #f5f5f5;
	}
	.more-input {
		display: flex;
		width: 175px;
		margin-left: 8px;
		margin-top: 5px;
		height: 30px;
		border: 1px solid rgb(224, 230, 227);
		border-radius: 6px;
		background: rgb(250, 250, 250);
	}
	.oneRowCol {
		width: 150px;
		margin-right: 20px;
	}
	.selectTime .el-date-editor {
		width: 200px;
	}
	.ysy-label {
		float: left; text-align: right; width: 60px; font-size: 14px; font-weight: 800; color:#111111;
	}
</style>
